<template>
  <div class="login-page">
    <div class="back">
      <van-nav-bar
        left-arrow
        style="left:-20px"

        @click-left="onClickLeft"
      />
    </div>
    <h3 class="title">短信登录</h3>
    <!-- 表单 -->
    <van-form class="form" ref="form">
      <van-field v-model="form.mobile" :rules="rules.mobile" placeholder="请输入手机号"></van-field>
      <van-field v-model="form.code" :rules="rules.code" placeholder="请输入验证码"></van-field>
      <van-button type="primary" size="mini" @click="mini">发送验证码</van-button>
    </van-form>
    <van-button class="dl" @click="add">登录</van-button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      form: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [

          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不对' }
        ],
        code: [

          { pattern: /^\d{6}$/, message: '' }
        ]
      },
      myExp: /^(?:(?:\+|00)86)?1\d{10}$/
    }
  },
  methods: {
    add () {
      this.$refs.form.validate().then(() => {
        console.log('校验成功')
        axios.get('')
      })
    },
    async mini () {
      console.log(this.form.mobile)
      const res = await axios.get(`http://toutiao.itheima.net/v1_0/sms/codes/${this.form.mobile}`)
      console.log(res)
    },
    onClickLeft () {
      this.$router.push('/')
    }
  }

}
</script>

<style scoped lang="less">
.login-page {
  padding: 0 32px;
  .back {

    height: 60px;
    display: flex;
    align-items: center;

  }
  .title {
    font-size: 22px;
    line-height: 1;
    padding: 30px 0;
  }
  .van-cell {
    padding: 20px 0;
    &::after{
      left: 0;
      right: 0;
    }
  }
  .dl {
    width: 100%;
    margin-top: 40px;
    height: 50px;
    color: #fff;
    font-size: 16px;
    border: none;
    background: linear-gradient(to right,#FF9999,#FFA179);
  }
}
</style>
